<template>
  <el-dialog
    title="选择站内链接"
    :visible.sync="dialogVisible"
    width="90%"
    :before-close="handleClose"
  >
    <div>
      <div class="flex-x-center">
        <div style="width: 200px">
          <el-tabs v-model="pageActive" tab-position="left">
            <el-tab-pane label="系统页面" name="systemPageTableColumn" />
            <el-tab-pane label="微页面" name="microPageTableColumn" />
            <el-tab-pane label="行业类型" name="industryPageTableColumn" />
          </el-tabs>
        </div>
        <div style="flex: 1">
          <table-panel
            height="500"
            :table-head="tableHead"
            :table-data="tableData"
          >
            <template #check="{ scope }">
              <div>
                <el-radio
                  v-model="active"
                  :label="scope.id"
                  @input="handleCheck(scope)"
                >{{ scope.id === active ? "已选" : "选择" }}</el-radio>
              </div>
            </template>
          </table-panel>
        </div>
      </div>
      <!--分页器-->
      <pagination-direction
        v-if="pageActive === 'microPageTableColumn'"
        :config="paginationConfig"
        @sizeschange="sizesChange"
        @pagechange="pageChange"
      />
      <div style="margin-top: 10px">
        <el-button
          @click="
            dialogVisible = false;
            tempPageData = null;
          "
        >取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import TablePanel from '@/publicComponents/TablePanel'
import { getWxaEntrance } from '@/views/wxaNewBuildModule/api/config'
import { lowCodePageList } from '@/api/marketing'
import { getIndustry } from '@/publicApi/publicDomain'
import { innerPageJsonTemplate } from '@/publicViews/operationCenter/AdvertisingManager/const'
const systemPageTableColumn = [
  { label: '页面名称', prop: 'name' },
  { label: '描述', prop: 'description' },
  { label: '创建时间', prop: 'createTime' },
  { label: '选择', prop: 'check', type: 'custom' }
]
const microPageTableColumn = [
  { label: '页面名称', prop: 'title' },
  { label: '创建时间', prop: 'createTime' },
  { label: '选择', prop: 'check', type: 'custom' }
]
const industryPageTableColumn = [
  { label: '行业类型', prop: 'title' },
  { label: '选择', prop: 'check', type: 'custom' }
]
const pageTitle = {
  systemPageTableColumn: '系统页面',
  microPageTableColumn: '微页面',
  industryPageTableColumn: '行业类型'
}
export default {
  components: { TablePanel },
  data() {
    return {
      systemPageTableColumn,
      microPageTableColumn,
      industryPageTableColumn,
      dialogVisible: false,
      active: '',
      pageActive: 'systemPageTableColumn',
      tableData: [],
      paginationConfig: {
        // 分页配置
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [5, 10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      industryPagePath: 'pages/sp-store/pages/shop-search/index',
      microPagePath: 'pages/sp-common/pages/customer-page/index',
      tempPageData: null
    }
  },
  computed: {
    tableHead() {
      return this[this.pageActive]
    }
  },
  watch: {
    pageActive: {
      handler() {
        this.fetchData()
      }
    }
  },
  methods: {
    async fetchData() {
      if (this.pageActive === 'systemPageTableColumn') {
        const { code, data } = await getWxaEntrance({ type: 2, status: 1 })
        if (code === 0) {
          this.tableData = data
        }
        return
      }
      if (this.pageActive === 'microPageTableColumn') {
        const paginationConfig = {
          page: this.paginationConfig.page,
          pageSize: this.paginationConfig.pageSize
        }
        const {
          code,
          data: { list, total }
        } = await lowCodePageList({ ...paginationConfig })
        if (code === 0) {
          list.map((v) => {
            v.pagePath = `${this.microPagePath}?pageId=${v.id}`
          })
          this.tableData = list
          this.paginationConfig.total = total
        }
        return
      }
      if (this.pageActive === 'industryPageTableColumn') {
        const paginationConfig = {
          page: this.paginationConfig.page,
          pageSize: this.paginationConfig.pageSize
        }
        const { code, data } = await getIndustry({ ...paginationConfig })
        if (code === 0) {
          const list = []
          for (const dataKey in data) {
            const obj = {
              title: data[dataKey],
              id: dataKey
            }
            list.push(obj)
          }
          list.map((v) => {
            v.pagePath = `${this.industryPagePath}?industryType=${v.id}`
          })
          this.tableData = list || []
        }
      }
    },
    handleOpen() {
      this.dialogVisible = true
      this.fetchData()
    },
    handleClose() {
      this.dialogVisible = false
    },
    handleCheck(row) {
      this.tempPageData = row
      this.active = row?.id
    },
    handleSubmit() {
      console.log('this.ruleForm',this.ruleForm)
      const json = JSON.parse(JSON.stringify(innerPageJsonTemplate))
      json.title = `站内链接-${pageTitle[this.pageActive]}-${
        this.tempPageData.title || this.tempPageData.name
      }`
      json.pageId = this.active
      json.pagePath = this.tempPageData.pagePath
      this.$emit('submit', json)
      this.$nextTick(() => {
        this.dialogVisible = false
        this.tempPageData = null
      })
    },
    sizesChange() {
      this.fetchData()
    },
    pageChange() {
      this.fetchData()
    }
  }
}
</script>

<style scoped></style>
